<template>
    <div>


        <!-- 统计数据 -->
        <el-row :gutter="30">
            <el-col :span="6">
                <el-card>
                    <div class="card-icon-container">
                        <img src="../assets/png/see.png" style="width:30%;height:10%;"/>

                    </div>
                    <div class="card-desc">
                        <div class="card-title">访问量</div>
                        <div class="card-count">{{ seeCount }}</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="card-icon-container">
                        <img src="../assets/png/user.png" style="width:30%;height:10%;"/>
                    </div>
                    <div class="card-desc">
                        <div class="card-title">用户量</div>
                        <div class="card-count">{{ UserCounts }}</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="card-icon-container">
                        <img src="../assets/png/article.png" style="width:30%;height:10%;"/>
                    </div>
                    <div class="card-desc">
                        <div class="card-title">文章量</div>
                        <div class="card-count">{{ articleCount }}</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="card-icon-container">
                        <img src="../assets/png/comment.png" style="width:30%;height:10%;"/>
                    </div>
                    <div class="card-desc">
                        <div class="card-title">留言量</div>
                        <div class="card-count">{{ commentCount }}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <div class="Echarts">

            <div style="display: flex;flex-direction: row;margin-top: 50px">
                <div id="pie2" style="width: 1200px;height: 600px;  "></div>

                <div id="pie1" style="width: 700px;height: 400px"></div>
            </div>


        </div>
    </div>
</template>

<script>
    import request from '@/utils/request'


    export default {
        name: 'BigData',
        data() {
            return {
                seeCount: 0,
                UserCounts: 0,
                articleCount: 0,
                commentCount:0
            }
        },
        created() {

            request.get('article/seeCount').then(res => {

                this.seeCount = res.data
            })

            request.get('/person/UserCounts').then(res => {
                this.UserCounts = res.data
            })

            request.get('/article/articleCount').then(res => {
                this.articleCount = res.data
            })
            request.get('/comment/commentCount').then(res => {
                this.commentCount = res.data
            })
        },
        methods: {
            myEcharts() {
                // var myChart = this.$echarts.init(document.getElementById('main'))

                var myChart3 = this.$echarts.init(document.getElementById('pie1'))
                var myChart4 = this.$echarts.init(document.getElementById('pie2'))
                //配置图表


                //饼图
                var pie1option = {
                    title: {
                        text: '用户性别比例',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: '', name: ''}

                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }

                //男女比例饼图
                var pie2Option = {
                    title: {
                        text: '文章类别比例'
                    },
                    legend: {
                        top: 'top'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 180],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                {value: '', name: ' '}

                            ]
                        }
                    ]
                }


                //男女比例
                request.get('/echarts/ArticleCount').then(res => {
                    res.data.forEach(item => {
                        pie2Option.series[0].data.push({name: item.category, value: item.articleCount})
                    })
                    myChart4.setOption(pie2Option)
                })


                request.get('/echarts/userSexCount').then(res => {
                    var xArr = new Array()
                    var yArr = new Array()
                    for (var i = 0; i < res.data.length; i++) {
                        xArr.push(res.data[i].sex)
                        yArr.push(res.data[i].userSexCount)
                    }


                    //饼图

                    res.data.forEach(item => {
                        pie1option.series[0].data.push({name: item.sex, value: item.userSexCount})
                    })
                    myChart3.setOption(pie1option)

                })
            }
        },
        mounted() {
            this.myEcharts()
        }
    }
</script>

<style>
    .card-icon-container {
        display: inline-block;
        font-size: 3rem;
    }

    .area-wrapper {
        display: flex;
        justify-content: center;
    }

    .card-desc {
        font-weight: bold;
        float: right;
    }

    .card-title {
        margin-top: 0.3rem;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 1rem;
    }

    .card-count {
        margin-top: 0.75rem;
        color: #666;
        font-size: 1.25rem;
    }

    .echarts {
        width: 100%;
        height: 100%;
    }

    .e-title {
        font-size: 13px;
        color: #202a34;
        font-weight: 700;
    }
</style>
